<template>
	<view>
		<u-sticky>
			<view class="flex-col group">
				<view class="flex-col justify-start relative section">
					<view class="flex-row items-center section_2" @click="isShowPopup=true">
						<text class="text_2 ml-9">{{searchText}}</text>
					</view>
				</view>
			</view>
		</u-sticky>
		<u-popup :show="isShowPopup" mode="top">
			<view>


				<u-cell-group>
					<u-cell title="开始日期" :value="startDateText" clickable @click="showBegin"></u-cell>
					<u-cell title="结束日期" :value="endDateText" clickable @click="showEnd"></u-cell>
				</u-cell-group>
				<u-datetime-picker :show="showBeginDate" @cancel="hidDate" v-model="value1" @confirm="confirmBegin"
					mode="date"></u-datetime-picker>
				<u-datetime-picker :show="showEndDate" @cancel="hidDate" v-model="value2" @confirm="confirmEnd"
					mode="date"></u-datetime-picker>
				<view class="flex-row justify-between items-center" style="padding: 20px;">
					<button size="mini" @click="cancelSearch">取消</button> <button size="mini" type="primary"
						@click="doSearch()">确定</button>
				</view>

			</view>
		</u-popup>
		<view class="flex-col page">

			<view class="flex-col group_2">
				<view class="flex-row items-center group_3">
					<view class="section_3"></view>
					<text class="font text_3 ml-11">分销汇总数据</text>
				</view>
				<view class="flex-col section_4" v-for="part in report.selfParts">
					<view class="flex-row group_4" style="margin-bottom: 20rpx;">
						<view class="flex-row" style="font-weight: bold;">
							<text class="font_2 text_6">所属店铺:</text>
							<text class="ml-8 font_2 text_7">{{part.secondSeller.user.nickname}} </text>
							<text class=" font_2 text_7"> ({{getLevel(part.secondSeller.highestRole)}})</text>
						</view>
					</view>
					<view class="group_4 grid-goup" style="">

						<view class="items-baseline grid-items" style="">

							<text class="font_2 text_10 " style="text-align: right;">单数:</text>
							<text class="font_3 text_9 ml-5">{{part.orderCount}}</text>
						</view>
						<view class="flex-row items-baseline grid-items">
							<text class="font_2 text_10" style="text-align: right;">销售积分:</text>
							<text class="font_3 ml-5">{{part.salesPv}}</text>
						</view>
						<view class="flex-row items-baseline grid-items">
							<text class="font_2 text_10" style="text-align: right;">总销售额:</text>
							<text class="font_3 ml-5">{{part.totalAmount}}</text>
						</view>
						<view class="flex-row items-baseline grid-items">
							<text class="font_2 text_10" style="text-align: right;">经营利润:</text>
							<text class="font_3 text_9">{{part.salesProfit}}</text>
						</view>

						<view class="flex-row items-baseline grid-items" v-if="Profit>0">
							<text class="font_2 text_10" style="text-align: right;">育成利润:</text>
							<text class="font_3 text_9">{{Profit}}</text>
						</view>

						<view class="flex-row items-baseline grid-items">
							<text class="font_2 text_10" v-if="Profit<=0" style="text-align: right;">上交金额:</text>
							<text class="font_2 text_10" v-else style="text-align: right;">总部应收款:</text>
							<text class="font_3 text_9" v-if="Profit<=0">{{part.handOutMoney}}</text>
							<text class="font_3 text_9" v-else>{{headQuarterPrice}}</text>
						</view>
					</view>

				</view>
			</view>
			<view class="flex-col group_5">
				<view class="flex-row items-center group_6">
					<view class="section_3"></view>
					<text class="font ml-11">分销对账单</text>
				</view>
				<view class="flex-col section_5">
					<view class="flex-row " style="font-size: 28rpx ;color: #757575; padding: 5px 0;">
						<view style="flex: 1; text-align:center;">
							分销名称
						</view>
						<view style="flex: 2; text-align: center;">
							电话|级别
						</view>
						<view style="flex: 1; text-align: center;">
							单数
						</view>
						<view style="flex: 1; text-align: center;">
							销售额
						</view>
						<view style="flex: 1; text-align: center;">
							上交金额
						</view>
					</view>
					<view class="flex-row   items-center self-stretch group_7 " v-for="part in report.branchesParts"
						style="font-size: 28rpx; color: #757575;">
						<view style="flex: 1; text-align:center;">
							{{part.firstSeller.user.nickname}}
						</view>
						<view style="flex: 2; text-align: center;">
							{{part.firstSeller.user.mobile}}|{{getLevel(part.firstSeller.highestRole)}}
						</view>
						<view style="flex: 1; text-align: center;">
							{{part.orderCount}}
						</view>
						<view style="flex: 1; text-align: center;">
							{{part.totalAmount}}
						</view>
						<view style="flex: 1; text-align: center;">
							{{part.handInMoney}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				report: {},
				isShowPopup: false,
				searchForm: {},
				searchText: "",
				value1: Number(new Date()),
				value2: Number(new Date()),
				startDateText: "",
				endDateText: "",
				start: "",
				end: "",
				showBeginDate: false,
				showEndDate: false,
				headQuarterPrice: 0,
				Profit: 0,
			};
		},
		onLoad() {
			let tmpDate = new Date();
			this.start = new Date(tmpDate.setDate(tmpDate.getDate() - 60));
			this.end = new Date();
			this.value1 = Number(this.start)
			this.value2 = Number(new Date())
			this.searchForm.start = this.$Utils.formatDate(this.start, 'yyyy-MM-ddT00:00:00');
			this.searchForm.end = this.$Utils.formatDate(this.end, 'yyyy-MM-ddT23:59:59');
			this.startDateText = this.$Utils.formatDate(this.start, 'yyyy-MM-dd');
			this.endDateText = this.$Utils.formatDate(this.end, 'yyyy-MM-dd');

			this.searchText =
				`日期: ${this.startDateText} 至 ${this.endDateText}`
			this.getAgencyReport();

		},
		methods: {
			doSearch() {
				this.searchForm.start = this.$Utils.formatDate(this.start, 'yyyy-MM-ddT00:00:00');
				this.searchForm.end = this.$Utils.formatDate(this.end, 'yyyy-MM-ddT23:59:59');
				this.startDateText = this.$Utils.formatDate(this.start, 'yyyy-MM-dd');
				this.endDateText = this.$Utils.formatDate(this.end, 'yyyy-MM-dd');
				this.searchText =
					`日期: ${this.startDateText} 至 ${this.endDateText}`
				this.isShowPopup = false;
				this.getAgencyReport()
			},
			cancelSearch() {
				this.isShowPopup = false;
			},
			hidDate() {

				this.showBeginDate = false;
				this.showEndDate = false;
			},
			getLevel(level) {
				return this.$Utils.getUserLevel(level)
			},
			showBegin() {

				this.startDateText = this.$Utils.formatDate(this.start, 'yyyy-MM-dd');
				this.showBeginDate = true;

			},
			showEnd() {
				this.showEndDate = true;

			},
			confirmBegin(e) {

				console.log(e)
				this.value1 = e.value;
				this.start = new Date(e.value)
				this.startDateText = this.$Utils.formatDate(this.start, 'yyyy-MM-dd');
				this.showBeginDate = false;
				this.showEndDate = false;
			},
			confirmEnd(e) {
				this.value2 = e.value;

				this.end = new Date(e.value)
				this.endDateText = this.$Utils.formatDate(this.end, 'yyyy-MM-dd');
				this.showBeginDate = false;
				this.showEndDate = false;
			},
			getAgencyReport() {

				this.$get({
					url: `${this.$Utils.ApiUrl}/reconciliation`,
					data: this.searchForm
				}).then(res => {
					console.log(res);
					this.report = res;
					this.headQuarterPrice = 0;
					this.Profit = 0;
					if (res.mngParts && res.mngParts.length > 0) {
						this.Profit = res.mngParts[0].salesProfit;
						this.headQuarterPrice = res.mngParts[0].headQuarterPrice;
					}

				})
			},

		},
	};
</script>

<style scoped lang="scss">
	.ml-9 {
		margin-left: 15.7rpx;
	}

	.ml-11 {
		margin-left: 19.19rpx;
	}

	.ml-51 {
		margin-left: 88.95rpx;
	}

	.ml-119 {
		margin-left: 207.56rpx;
	}

	.ml-5 {
		margin-left: 8.72rpx;
	}

	.grid-goup {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 15px;
	}

	.grid-items {
		display: grid;
		grid-template-columns: 3fr 3fr;
	}

	.group {

		.text-wrapper {
			padding: 136.05rpx 0 27.91rpx;
			background-image: url('https://ide.code.fun/api/image?token=672c262573147e0011b94bf3&name=2960d85ac9d0f7034e61b93a169b9f87.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.text {
				margin-right: 167.44rpx;
				color: #000000;
				font-size: 31.4rpx;
				font-family: SourceHanSansCN;
				line-height: 29.9rpx;
			}
		}

		.section {
			padding: 19.19rpx 0 12.21rpx;
			background-color: #ffffff;

			.section_2 {
				margin: 0 8.72rpx;
				padding: 10.47rpx 22.67rpx;
				background-color: #f6f6f6;
				border-radius: 27.91rpx;

				.image {
					width: 34.88rpx;
					height: 34.88rpx;
				}

				.text_2 {
					color: #757575;
					font-size: 28.42rpx;
					font-family: SourceHanSansCN;
					line-height: 29.65rpx;

				}
			}
		}
	}

	.page {
		background-color: #f6f6f6;
		width: 100%;

		.group_2 {
			margin-top: 15.7rpx;

			.group_3 {
				padding: 0 17.44rpx 15.7rpx;

				.text_3 {
					line-height: 22.57rpx;
				}
			}

			.section_4 {
				padding: 20.93rpx 17.44rpx 24.42rpx;
				background-color: #ffffff;

				.group_4 {
					padding: 10rpx 3.49rpx;

					.font_2 {
						font-size: 28.42rpx;
						font-family: SourceHanSansCN;
						line-height: 22.6rpx;
						color: #888888;
					}

					.text_4 {
						line-height: 22.47rpx;
					}

					.font_3 {
						font-size: 24.42rpx;
						font-family: SourceHanSansCN;
						line-height: 18.54rpx;
						color: #e33c64;
					}

					.text_5 {
						color: #555555;
					}

					.text_6 {
						line-height: 22.52rpx;
					}

					.text_7 {
						color: #555555;
						line-height: 22.4rpx;
					}

					.text_8 {
						line-height: 22.78rpx;
					}

					.text_9 {
						margin-left: 6.98rpx;
					}

					.text_10 {
						line-height: 22.22rpx;
					}

					.text_11 {
						line-height: 22.78rpx;
					}

					.text_12 {
						margin-left: -6.98rpx;
					}

					.text_13 {
						line-height: 22.73rpx;
					}
				}
			}
		}

		.group_5 {
			margin-top: 59.3rpx;

			.group_6 {
				padding: 0 22.67rpx 19.19rpx;
			}

			.section_5 {
				padding-top: 20.93rpx;
				background-color: #ffffff;

				.text_14 {
					margin-left: 34.88rpx;
					line-height: 29.65rpx;
					width: 95.93rpx;
				}

				.group_7 {
					padding: 20.93rpx 0rpx;
					border-top: solid 1.74rpx #e0e0e0;

					.text_15 {
						line-height: 22.03rpx;
					}

					.text_16 {
						line-height: 27.23rpx;
					}

					.font_4 {
						font-size: 24.42rpx;
						font-family: SourceHanSansCN;
						line-height: 18.54rpx;
						color: #000000;
					}

					.text_17 {
						line-height: 18.51rpx;
					}

					.text_18 {
						line-height: 18.51rpx;
					}

					.text_19 {
						line-height: 18.51rpx;
					}
				}
			}
		}

		.section_3 {
			background-color: #ff0101;
			border-radius: 3.49rpx;
			width: 6.98rpx;
			height: 36.63rpx;
		}

		.font {
			font-size: 28.42rpx;
			font-family: SourceHanSansCN;
			line-height: 22.6rpx;
			color: #000000;
		}
	}
</style>